<template>
  <div class="notification-detail">
    <van-nav-bar
        title="通知详情"
        left-arrow
        @click-left="handleBack"
        class="nav-bar"
    />

    <div class="notification-content">
      <!-- 标题区域 -->
      <div class="title-container">
        <h2 class="notification-title">{{ data.notification.title }}</h2>
        <div class="notification-tag" :class="getTagClass(data.notification.type)">
          {{ getTagText(data.notification.type) }}
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="notification-body">
        <span v-html="data.notification.content"></span>
      </div>

      <!-- 图片轮播 -->
      <div v-if="data.notification?.images && data.notification.images.length > 0" class="images-container">
        <van-swipe
            class="product-swipe"
            :autoplay="3000"
            indicator-color="white"
            @click="handleImageClick"
        >
          <van-swipe-item v-for="(image, index) in data.notification.images" :key="index" class="swipe-item">
            <img
                :src="image"
                class="product-image"
                :alt="`通知图片 ${index + 1}`"
                loading="lazy"
            />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 时间信息 -->
      <div class="time-container">
        <van-icon name="clock-o" size="14" class="time-icon" />
        <span>{{ formatDateTime(data.notification.createdAt) }}</span>
      </div>
    </div>

    <!-- 图片预览弹窗 -->
    <van-image-preview
        v-model:show="showImagePreview"
        :images="data.notification.images"
        :initial-index="previewIndex"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from '@/utils/axios';
import { Icon } from 'vant';

// 路由相关
const route = useRoute();
const router = useRouter();
const notificationId = route.query.nid;

// 图片预览相关
const showImagePreview = ref(false);
const previewIndex = ref(0);

// 通知详情
const data = reactive({
  notification: {
    id: 0,
    title: '',
    content: '',
    type: 1, // 1: 系统通知, 2: 活动通知, 3: 重要通知
    createdAt: '',
    images: [],
  }
});

// 根据通知类型获取标签样式
const getTagClass = (type: number) => {
  switch (type) {
    case 1:
      return 'tag-system';
    case 2:
      return 'tag-activity';
    case 3:
      return 'tag-important';
    default:
      return 'tag-system';
  }
};

// 根据通知类型获取标签文本
const getTagText = (type: number) => {
  switch (type) {
    case 1:
      return '系统通知';
    case 2:
      return '订单通知';
    // default:
    //   return '通知';
  }
};

// 格式化时间
const formatDateTime = (dateString: string) => {
  if (!dateString) return '';

  const date = new Date(dateString);

  // 获取年月日
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');

  // 获取时分
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 打开图片预览
const handleImageClick = (index: number) => {
  previewIndex.value = index;
  showImagePreview.value = true;
};

// 获取通知详情
const getNotificationDetail = async () => {
  try {
    const response = await axios.get(`/api/notification/getOneNotification/${notificationId}`);
    console.log("响应数据: ", response)
    if (response.code === 200 ) {
      data.notification = response.data;
      // 处理图片数据，如果是字符串则解析为数组
      if (typeof response.data.images === 'string') {
        data.notification.images = JSON.parse(response.data.images);
      }
      console.log("图片信息: ", data.notification.images)
    }
  } catch (error) {
    console.error("获取通知详情失败: ", error);
    // 可以在这里添加错误提示
  }
};

// 返回上一页
const handleBack = () => {
  router.push("notifications");
};

// 页面挂载时获取详情
onMounted(() => {
  getNotificationDetail();
});
</script>

<style scoped>
.notification-detail {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 20px;
}

.nav-bar {
  background: linear-gradient(135deg, #4265f5, #58aaff);
  color: white;
}

.notification-content {
  padding: 20px;
  background-color: #fff;
  margin: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.notification-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.title-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.notification-title {
  font-size: 20px;
  font-weight: 600;
  color: #1d2129;
  margin: 0;
  line-height: 1.4;
}

.notification-tag {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: white;
  margin-left: 10px;
  white-space: nowrap;
}

.tag-system {
  background-color: #4e86ff;
}

.tag-activity {
  background-color: #00b42a;
}

.tag-important {
  background-color: #ff7d00;
}

.notification-body {
  line-height: 1.8;
  color: #4e5969;
  font-size: 15px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f2f3f5;
}

.images-container {
  margin: 15px 0 25px;
  border-radius: 8px;
  overflow: hidden;
}

.product-swipe {
  height: 280px;
  border-radius: 8px;
  overflow: hidden;
}

.swipe-item {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.swipe-item:active {
  transform: scale(0.98);
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.time-container {
  display: flex;
  align-items: center;
  color: #86909c;
  font-size: 14px;
  padding-top: 10px;
}

.time-icon {
  margin-right: 6px;
  vertical-align: middle;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .notification-content {
    padding: 15px;
    margin: 10px;
  }

  .notification-title {
    font-size: 18px;
  }

  .product-swipe {
    height: 220px;
  }
}

/* 加载动画 */
:deep(.van-swipe__track) {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
</style>
